<template>
  <div>
 
    <div class="container">

        <div class="item12">

            <div class="item1">
                <mymenu></mymenu>
            </div>

            <div class="item2">
            <van-field
            v-model="fields"
            is-link
            readonly
            name="picker"
            label="更换搜索字段"
            placeholder="更换搜索的字段"
            @click="showPicker = true"
            />
            <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
            </van-popup> <a @click="order('asc')">正序</a>/<a @click="order('desc')">倒序</a>

              <van-search
              v-model="keyword"
              show-action
              placeholder="请输入搜索关键词"
              @search="onSearch"
              @cancel="onCancel"
            />
                
                <table>
                    <tr>
                        <td>选择</td>
                        <td>ID</td>
                        <td>邮箱</td>
                        <td>激活状态</td>
                        <td>操作</td>
                        
                    </tr>
                    <tr v-for="i,j in userlist" :key="j">
                     <van-checkbox-group v-model="checked" ref="checkboxGroup">
                    <td> 
                    <van-checkbox :name="i.id"></van-checkbox>
                    </td> 
                    </van-checkbox-group>
                        <td>{{i.id}}</td>
                        <td>{{i.email}}</td>
                        <td>{{i.state}}</td>
                        <td><van-button @click="upstate(i.id,i.state)" size="small">修改激活状态</van-button></td>
                        
                    </tr>
                </table>
                 <van-button color="red" @click="delall()">全部删除</van-button><br>
                 <!-- <van-pagination v-model="page" :page-count="total" :items-per-page="size" @change="get_userlist"/> -->
                <!-- <center> <van-button @click="pages(0)" :disabled="page==1">上一页</van-button>[{{page}}/{{total}}]<van-button @click="pages(1)" :disabled="page==total">下一页</van-button></center> -->
                <div>
                  <center>
                  <van-button  @click="my_page(last)" :disabled="!last"  size="small">上一页</van-button>
                  <span v-for="i in total" :key="i">
                  <a v-if="i != page" @click="my_page(i)">{{i}}</a>
                  <font v-if="i == page" color="yellow">{{i}}</font>&emsp;
                  </span>
                  <van-button  @click="my_page(next)" :disabled="!next"  size="small">下一页</van-button>
                  </center>
                </div>
            </div>


        </div>

    </div>

  </div>
</template>

<script>
// 导入子组件

import mymenu from '../components/menu.vue'

export default {
    
 data() {
    return {
        fields:'邮箱',
        showPicker:false,  
        columns:['id','邮箱','激活状态'],
        // options1:[{text:'邮箱',value:'email'},{text:'id',value:'id'},{text:'状态',value:'state'}],
        // options2:[{text:'正序',value:'asc'},{text:'倒序',value:'desc'}],
        // value1:'email',
        // value2:'asc',
        userlist:[],
        checked:[],
        page:1,// 当前页码
        size:4,
        total:0,
        last:0, // 上一页页码
        next:2, // 下一页页码
        keyword:'', //搜索
        od:'asc',

    }

  },
  
  components:{
    mymenu
  },
  methods:{
    order(value){
      this.od = value
      this.get_userlist()
    },

    onConfirm(value){    // 选中字段值
      this.fields = value
      this.showPicker = false
    },
    onSearch(){   // 搜索
      this.page = 1
      this.get_userlist()
    },
    onCancel(){    //取消搜索
      this.get_userlist()
    },
    my_page(page){   //自主分页
    this.page = page
    var newfields = ''
    if(this.fields=='邮箱'){
      newfields = 'email'
    }if(this.fields=='激活状态'){
      newfields = 'state'
    }if(this.fields=='id'){
      newfields = this.fields
    }
    this.myaxios(this.baseURL+'usermanage/','get',{page:this.page,size:this.size,keyword:this.keyword,fields:newfields,od:this.od}).then(resp=>{
      console.log('获取用户列表',resp)
      if(resp.errcode == 0){
        this.userlist = resp.data
        this.total = resp.total
         if(this.page == 1){
          this.last = 0
          }else{
            this.last = this.page - 1
          }
          if(this.page == this.total){
            this.next = 0
          }else{
            this.next = this.page + 1
          }
      }else{
        this.$toast.fail(resp.msg)
      }})
   
   


    },
    get_userlist(){
    var newfields = ''
    if(this.fields=='邮箱'){
      newfields = 'email'
    }if(this.fields=='激活状态'){
      newfields = 'state'
    }if(this.fields=='id'){
      newfields = this.fields
    }
    this.myaxios(this.baseURL+'usermanage/','get',{page:this.page,size:this.size,keyword:this.keyword,fields:newfields,od:this.od}).then(resp=>{
      console.log('获取用户列表',resp)
      if(resp.errcode == 0){
        this.userlist = resp.data
        this.total = resp.total
        // this.$toast.success(resp.msg)
      }else{
        this.$toast.fail(resp.msg)
      }})
    },

    
    delall(){
    this.myaxios(this.baseURL+'usermanage/','delete',{checked:JSON.stringify(this.checked)}).then(resp=>{
      console.log('删除用户',resp)
      if(resp.errcode == 0){
        this.$toast.success(resp.msg)
        this.get_userlist()
      }else{
        this.$toast.fail(resp.msg)
      }})
    },
    upstate(uid,state){
        var newstate = 0
        if(state == 1){
            newstate = 0
        }else{
            newstate = 1
        }

      this.myaxios(this.baseURL+'usermanage/','put',{id:uid,state:newstate}).then(resp=>{
      console.log('修改用户',resp)
      if(resp.errcode == 0){
        this.$toast.success(resp.msg)
        this.get_userlist()
      }else{
        this.$toast.fail(resp.msg)
      }})  
    }


  },
  mounted(){
    
  },
  created(){
    this.get_userlist()
    

  }

}
</script>


<style scoped>
@import url('../assets/style.css');


</style>

